<template>
  <div>
    <PageList>
      <template #header>实时定位</template>
      <template #filter>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="人员实时定位" name="peoplePositioning">
            <ListFilter :form="peopleFilter" :key-list="peopleKeyList" @search="handleSearch" @reset="handleReset" />
          </el-tab-pane>
          <el-tab-pane label="车辆实时定位" name="carPositioning">
            <ListFilter :form="carFilter" :key-list="carKeyList" @search="handleSearch" @reset="handleReset" />
          </el-tab-pane>
        </el-tabs>
      </template>
    </PageList>
    <div v-if="!IsOnline" class="alert-warp">
      <div class="alert-banner">当前客户端离线</div>
    </div>
    <component :is="activeName" v-if="IsOnline" />
  </div>
</template>

<script>
import listMixin from '@/mixins/list'
import ListFilter from '@/components/ListFilter'
import { area, department, GetOnlineStatus, work } from '@/api/api'
export default {
  components: {
    ListFilter,
    carPositioning: () => import('./components/carPositioning'),
    peoplePositioning: () => import('./components/peoplePositioning')
  },
  mixins: [listMixin],
  data() {
    return {
      peopleFilter: {
        'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
        'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
        'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
        autoGateId: {
          label: '展示闸机数据',
          placeholder: '请选择是否展示闸机数据',
          type: 'select',
          arr: [
            { label: '展示', value: 1 },
            { label: '不展示', value: 2 }
          ]
        },
        keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
      },
      carFilter: {
        'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
        autoGateId: {
          label: '展示闸机数据',
          placeholder: '请选择是否展示闸机数据',
          type: 'select',
          arr: [
            { label: '展示', value: 1 },
            { label: '不展示', value: 2 }
          ]
        },
        keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
      },
      peopleKeyList: ['employee.accessCardID', 'employee.name', 'employee.rfid'],
      carKeyList: ['car.plateNumber', 'car.carType', 'car.rfid'],
      // 部门下拉框
      dptList: [],
      // 部门下拉框
      areaList: [],
      // 工种下拉框
      workList: [],
      activeName: 'peoplePositioning',
      IsOnline: true
    }
  },
  mounted() {
    // 查询搜索框
    this.threeList()
    const that = this
    that.CheckOnlinStatus()
  },
  methods: {
    async CheckOnlinStatus() {
      const res = await GetOnlineStatus()
      if (res.code === 200) {
        this.IsOnline = res.data
      }
    },
    // 部门
    async dptHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await department('post', obj, false)
        if (res.code === 200) {
          // this.dptList = [{
          //   label: '空',
          //   value: '空'
          // }]
          this.dptList = []
          res.data.items.forEach((item) => {
            this.dptList.push({
              label: item.deptName,
              value: item.id
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 区域
    async areaHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await area('post', obj, false)
        if (res.code === 200) {
          // this.areaList = [{
          //   label: '空',
          //   value: '空'
          // }]
          this.areaList = []
          res.data.items.forEach((item) => {
            this.areaList.push({
              label: item.name,
              value: item.id,
              isForGate: item.isForGate
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 工种
    async workHandler() {
      try {
        const obj = { pageIndex: 1, pageSize: 1e8 }
        const res = await work('post', obj, false)
        if (res.code === 200) {
          // this.workList = [{
          //   label: '空',
          //   value: '空'
          // }]
          this.workList = []
          res.data.items.map((item) => {
            this.workList.push({
              label: item.workName,
              value: item.id
            })
          })
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询部门，区域，工种
    async threeList() {
      await this.areaHandler()
      await this.dptHandler()
      await this.workHandler()
      this.$nextTick(() => {
        this.peopleFilter = {
          'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
          'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
          'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
          autoGateId: {
            label: '展示闸机数据',
            placeholder: '请选择是否展示闸机数据',
            type: 'select',
            arr: [
              { label: '展示', value: 1 },
              { label: '不展示', value: 2 }
            ]
          },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        }
        this.carFilter = {
          'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
          autoGateId: {
            label: '展示闸机数据',
            placeholder: '请选择是否展示闸机数据',
            type: 'select',
            arr: [
              { label: '展示', value: 1 },
              { label: '不展示', value: 2 }
            ]
          },
          keyword: { label: '关键字', placeholder: '请输入车辆类型或车辆RFID，车牌号' }
        }
      })
    }
  }
}
</script>
